﻿/// <reference path="Window.js" />
//聊天窗口  参考qq窗口
IM.Control.BaseChatWindow = function(conf) {
    IM.Control.Window.apply(this, arguments);
    this.LeftChatArea; //聊天窗口左侧的聊天功能区域
    this.RightArea; //聊天窗口右侧的功能区域
    this.TopToolBox; //顶部的工具条区
    //聊天功能区域
    this.MessageShowArea; //聊天信息展示区
    this.MiddleToolBox; //中部聊天工具条，包含字体，聊天表情
    this.FontSelect; //字体选择
    this.FontSizeSelect; //字体大小选择框
    this.ColorSelect; //颜色选择

    this.MessageInputArea; //聊天信息输入区
    this.BottomToolBox; //底部的工具条，用来放发送按钮
    //右侧功能区 分成上下两个部分，分别用来显示好友头像信息及自己信息
    this.RightTopArea; //右上部分
    this.RightBottomArea; //右下部分

    //发送按钮
    this.SendButton;

    //显示消息(聊天窗体不负责存储消息，要显示的消息由外部提供)
    this.ShowMessage;

    //显示消息区，滚动条滚动到最下方
    this.ShowAreaScrollToBottom = function() {
        this.MessageShowArea.get(0).scrollTop = this.MessageShowArea.get(0).scrollHeight;
    };

    //将一条消息放入显示区显示
    this.AddMessageToShowArea = function(msg) {
        if (typeof this.MessageShowArea != "undefined") {
            this.MessageShowArea.html(this.MessageShowArea.html() + "<br/>" + msg);
            this.ShowAreaScrollToBottom();
        }
    };

    //发送消息
    this.SendMessage = function() {
        //$(this.MessageInputArea.find("iframe")[0].contentWindow.document.body).html("发送");
        //this.SetTitle(new Date().toString());
        //this.ShowAreaScrollToBottom();
    };

    //清空信息展示区内容(清屏)
    this.ClearShowArea = function() {
        if (typeof this.MessageShowArea != "undefined") {
            this.MessageShowArea.html("&nbsp;");
        }
    };

    //清空信息输入区内容(用来在初始化,或发送完消息后清空输入框)
    this.ClearInputArea = function() {
        $(this.MessageInputArea.find("iframe")[0].contentWindow.document.body).html("");
    };

    //为iframe设置内容样式
    this.SetInputAreaStyle = function(styleName, styleValue) {

        var iframe = this.MessageInputArea.find("iframe")[0];
        var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

        var r = ""; //获取选择的文字
        if (iframeDocument.selection) {
            r = iframeDocument.selection.createRange().text;
        } else if (iframeDocument.getSelection) {
            r = iframeDocument.getSelection();
        }
        if (r == "")
            iframeDocument.execCommand("selectall"); //如果没有选择，设置成全选

        if (styleName == 'backcolor' && /a/[-1] == 'a') {
            iframeDocument.execCommand('hilitecolor', false, styleValue);
        } else {
            iframeDocument.execCommand(styleName, false, styleValue);
        }
    };

    //获取输入的聊天内容
    this.GetInputContent = function() {
        return $(this.MessageInputArea.find("iframe")[0].contentWindow.document.body).html();
    };

    this.OnMaxSized = function() {
        this.ResetBaseContentSize();
    }; //最大化事件
    this.OnNormalSized = function() {
        this.ResetBaseContentSize();
    }; //窗口恢复事件
    this.OnMinSized = function() { 
        
    }; //窗口最小化事件

    //发送按钮点击事件
    this.SendButtonOnClick = function() {
        if (typeof this.SendMessage != "undefined") {
            this.SendMessage();
        }
    };

    this.ResetBaseContentSize = function() {
        //设置左右区大小
        this.RightArea.width(140);
        this.RightArea.height(this.Content.height());
        this.RightArea.css("padding", 5);
        this.LeftChatArea.css("padding", 5);
        this.LeftChatArea.width(this.Content.width() - this.RightArea.width() - 20);
        this.LeftChatArea.height(this.Content.height());

        //设置左区元素大小(MessageShowArea  , MessageInputArea高度要自动调整)
        var height = (this.Content.height() - this.TopToolBox.height() - this.MiddleToolBox.height() - this.BottomToolBox.height() - 10) / 2;
        this.MessageShowArea.height(height);
        this.MessageInputArea.height(height);

        //设置右区元素大小
        height = (this.RightArea.height() - 10) / 2;
        this.RightTopArea.height(height);
        this.RightBottomArea.height(height);
    };

    this.OnKeyDown = function() { alert(this.Render.css("z-index")); };

    //基础聊天窗口初始化
    this.BaseChatWindowInit = function() {
        this.Content.css("clear", "both");

        //分别创建左右区块
        this.LeftChatArea = $("<div style='float:left;clear:left;'></div>");
        this.RightArea = $("<div  style='float:left;clear:right;'></div>");
        this.Content.append(this.LeftChatArea);
        this.Content.append(this.RightArea);

        //左块
        this.TopToolBox = $("<div style='height:30px;' unselectable='on'>顶部工具箱</div>"); //顶部工具条
        this.MessageShowArea = $("<div style='overflow:auto;background-color:white;word-wrap: break-word;word-break: break-all;'></div>");

        this.MiddleToolBox = $("<div style='height:30px;' unselectable='on'></div>"); //中部聊天工具条，包含字体，聊天表情

        this.MessageInputArea = $("<div style='ime-mode:active'></div>"); //聊天信息输入区

        //底部的工具条，用来放发送按钮
        this.BottomToolBox = $("<div style='height:40px;text-align:right;padding:5px;'></div>");
        this.SendButton = $("<input type='button' value='发 送'/>");
        this.SendButton.addClass("IM_SendButton");
        this.SendButton.bind("click", (function(obj) { return function() { if (typeof obj.SendButtonOnClick != "undefined") obj.SendButtonOnClick(); } })(this));
        this.BottomToolBox.append(this.SendButton);

        this.LeftChatArea.append(this.TopToolBox);
        this.LeftChatArea.append(this.MessageShowArea);
        this.LeftChatArea.append(this.MiddleToolBox);
        this.LeftChatArea.append(this.MessageInputArea);
        this.LeftChatArea.append(this.BottomToolBox);

        //创建输入框iframe
        var iframe = document.createElement("iframe");
        this.MessageInputArea.append($(iframe));

        iframe.width = "100%";
        iframe.height = "100%";
        iframe.scrolling = "auto";
        iframe.frameborder = 0;

        var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
        iframeDocument.designMode = "on";
        iframeDocument.open(); //word-wrap:break-word;word-break: break-all;
        iframeDocument.write('<html><head><style type="text/css">body{margin:0px;background:white;background-color:white;word-wrap: break-word;word-break: break-all; }</style></head><body contenteditable="true">&nbsp;</body></html>');
        iframeDocument.close();

        this.ClearInputArea();

        if ($.browser.msie)
            this.MessageInputArea.find("iframe").bind("focus", (function(obj) { return function() { if (!obj.IsActive) obj.Show(); }; })(this));
        else {
            iframeDocument.body.onclick = (function(obj) { return function() { if (!obj.IsActive) obj.Show(); }; })(this);
        }

        //字体选择框
        this.FontSelect = $('<select command="fontname"><option selected>字体</option><option value="宋体">宋体</option><option value="黑体">黑体</option><option value="楷体_GB2312">楷体</option><option value="仿宋_GB2312">仿宋</option><option value="隶书">隶书</option><option value="幼圆">幼圆</option><option value="Arial">Arial</option><option value="Arial Black">Arial Black</option><option value="Arial Narrow">Arial Narrow</option><option value="Brush ScriptMT">Brush Script MT</option><option value="Century Gothic">Century Gothic</option><option value="Comic Sans MS">Comic Sans MS</option><option value="Courier">Courier</option><option value="Courier New">Courier New</option><option value="MS Sans Serif">MS Sans Serif</option><option value="Script">Script</option><option value="System">System</option><option value="Times New Roman">Times New Roman</option><option value="Verdana">Verdana</option><option value="WideLatin">Wide Latin</option><option value="Wingdings">Wingdings</option></select>')
        //this.FontSelect.find("option").each((function(obj) { return function(i) { if (i <= 0) return; var option = obj.FontSelect.find("option")[i]; option.style.fontFamily = option.value; }; })(this));
        this.FontSelect.css({ "width": 100, "margin-top": 2 });
        this.FontSelect.bind("change", (function(obj) { return function() { if (obj.FontSelect[0].selectedIndex == 0) return; var select = obj.FontSelect[0]; obj.SetInputAreaStyle(select.getAttribute("command"), select.options[select.selectedIndex].value); select.selectedIndex = 0; } })(this));
        this.MiddleToolBox.append(this.FontSelect);

        //字体大小选择框
        this.FontSizeSelect = $('<select command="fontsize"><option selected>大小</option><option value="1">特小</option><option value="2">很小</option><option value="3">小</option><option value="4">普通</option><option value="5">大</option><option value="6">很大</option><option value="7">特大</option></select>');
        this.FontSizeSelect.css({ "width": 80, "margin-left": 4, "margin-top": 2 });
        this.FontSizeSelect.bind("change", (function(obj) { return function() { if (obj.FontSizeSelect[0].selectedIndex == 0) return; var select = obj.FontSizeSelect[0]; obj.SetInputAreaStyle(select.getAttribute("command"), select.options[select.selectedIndex].value); select.selectedIndex = 0; } })(this));
        this.MiddleToolBox.append(this.FontSizeSelect);

        //颜色选择框
        this.ColorSelect = $("<input type='button' value='' title='字体颜色'/>").addClass("IM_ColorButton");
        this.MiddleToolBox.append(this.ColorSelect);
        var colorPanel = new IM.Control.ColorPanel({ "IsVisible": false,
            "OnColorSelected": (function(obj) {
                return function() {
                    obj.SetInputAreaStyle("forecolor", colorPanel.Color);
                };
            })(this)
        });
        colorPanel.SetZIndex(this.GetZIndex() + 1);

        this.ColorSelect.bind("click", (function(obj) { return function() { colorPanel.Render.css({ left: obj.ColorSelect.offset().left, top: obj.ColorSelect.offset().top, "position": "absolute" }); colorPanel.Show(); }; })(this));

        //右块
        this.RightTopArea = $("<div style='height:30px;'>对方信息</div>"); ; //右上部分
        this.RightBottomArea = $("<div style='height:30px;'>我的信息</div>"); ; //右下部分
        this.RightArea.append(this.RightTopArea);
        this.RightArea.append(this.RightBottomArea);
        this.ResetBaseContentSize(); //元素加载后调整大小

        var keydown = (function(obj) {
            return function(e) {
                if (e.originalEvent.ctrlKey && e.originalEvent.keyCode == 13) {
                    obj.OnKeyDown();
                }
            }
        })(this);

        this.Render.bind("keydown", keydown);
    };

    this.BaseChatWindowInit();
};